<template>
  <div id="app">
    <ul class="nav">
      <li>
        <!-- router-link的本质a连接 to中的路径，给了a标签中的href -->
        <!-- <router-link to="/about">Abouttest</router-link> -->
        <router-link to="/aboutalias">aboutalias</router-link>
      </li>
      <li>
        <!-- <router-link to="/home">Hometest</router-link> -->
        <router-link :to="{name:'home',params:{id:id}}">Hometest</router-link>
        <!-- router-link引入路由有两种方式
        一种：to 路径
        一种：:to = "{name:'xx'}" 使用路由名称
        -->
      </li>
    </ul>
    <!-- 将匹配到的路由的内容显示到router-view
    路由组件之间的切换是路由组件的销毁与重建
    -->
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive>-->
    <router-view></router-view>
    <!-- 命名视图 -->
    <router-view name="First"></router-view>
    <router-view name="Second"></router-view>
    <router-view name="Third"></router-view>

    <!--
       <keep-alive>
      缓存路由组件对象
      默认情况下，路由的切换是路由组件的销毁与重建，使用keep-alive 组件的显示与隐藏
      使用它可以提高用户体验，但是对于数据实时更新，要求比较高的情况，不要使用
      
    -->
    <hr />
    <ComB />
  </div>
</template>

<script>
/*  vue router 是vue的一个核心插件  
普通组件定义 放在components文件夹中
路由组件  放在views（vue-cli自动配置时放在了views文件夹中） 或  pages 可以用其他名字，但是不建议用
创建路由组件的步骤：
1. 在views文件夹中创建路由组件
2. 创建路由器模块 src 建立router文件夹在文件夹中创建index.js
下载vue-router
npm i -S vue-router@3
3.在入口文件main.js 引入路由器模块，在vue配置选项对象中配置router 路由器
4.在router文件中的index.js中注册路由器组件
routes：[{path,component}]
5.通过router-link to填写路径 引入
6.通过router-view去显示组件内容


*/
import ComB from "./components/ComB";
export default {
  name: "App",
  data() {
    return {
      id: 1
    };
  },
  components: {
    ComB
  }
};
</script>

<style lang="less">
.nav {
  display: flex;
  list-style: none;
  li {
    margin-right: 30px;
    a {
      text-decoration: none;
    }
    // 导航高亮显示
    .router-link-active {
      color: red;
      background-color: green;
    }
  }
}
</style>
